<template>
  <div>
    <el-dialog title="上传文件"
               :visible.sync="showDialog"
               width="30%"
               @open="onOpen"
               @close='quiteUpload'
                v-on="$listeners"
               v-bind="$attrs">
      <el-upload
       class="upload-demo"
        ref="upload"
        action="#"
        @open="onOpen"
        @close="onClose"
        accept="txt, png, jpg, zip, ppt"
        :limit="1"
        :file-list="fileList"
        :before-upload="beforeUpload">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <div>文件名:<span>{{this.filename}}</span></div>
        <div slot="tip" class="el-upload__tip">不超过1MB</div> 
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quiteUpload">取消</el-button>
        <el-button type="primary" @click="submitUpload()">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { saveFile } from '@/api/system/file';

import request from '@/utils/request';
export default {
  name: 'FileAdd',
  components : {

  },
   props: {
      addOrUpdateVisible: {
        type: Boolean,
        default: false
      },
    },
  data(){
     return {
        showDialog: false,
        fileList: [],
        filename: '',
        files: '',
        file: {
          url: null,
          type: '',
          fileName: undefined,
          size: undefined,
        },
      }
  },
  watch: {
      // 监听 addOrUpdateVisible 改变
      addOrUpdateVisible () {
        this.showDialog = this.addOrUpdateVisible
      },
  },
  methods:{
      onOpen () {
        console.log('hahah');
      },
      onClose () {
        //清空当前弹窗数据
        this.filename = ''
        this.files = ''
        this.$emit('changeShow', 'false')
      },
      // 取消上传
      quiteUpload () {
        this.showDialog = false
        if (this.$refs.upload !== undefined) {
          this.$refs.upload.clearFiles()
          this.files = ''
          this.filename = ''
        }
        this.$emit('changeShow', 'false')
      },
      //文件格式大小检验
      beforeUpload (file) {
        console.log(file)
        this.files = file
        this.file.fileName = this.filename = file.name
        this.file.type = file.name.split('.')[1]
        this.file.size = file.size
        const extension = this.file.type.toLowerCase()
        const isLt1M = file.size / 1024 / 1024 < 1
        if (!isLt1M) {
          this.$message.warning('上传文件大小不能超过 1MB!')
          console.log(this.$refs.upload);
          this.filename = ''
        this.files = ''
          this.$refs.upload.clearFiles()
          return false
        }
      }, 
      //文件上传
      submitUpload () {
        const loading = this.$loading({
          lock: true,
          text: '文件上传中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (this.filename === '') {
          this.$message.warning('请选择要上传的文件！')
          return false
        }
        console.log(this.files);
        let fd = new FormData()
        //file是对接名 和接口接收实体对象名一样，files就是要传的文件
        fd.append('file', this.files)
        console.log(fd.get("file"));
        request({
          url: '/uploadImgFile',
          method: 'post',
          data : fd
        }).then(res =>{
          console.log(res);
          if(res.code == 200){
          
          this.file.url = res.data.url
          this.addFile()
          this.$message.success('上传成功!');
          this.$emit('fresh')
          this.onClose()
          }
        }).then(err =>{
          this.$message.success('上传失败!');
           this.$emit('fresh')
          this.onClose()
        })
        
       loading.close()
     
      },
      async addFile () {
        console.log(this.file);
        await saveFile(this.file)
      },
      
  }
}
</script>
<style>

</style>